<template>
	<div>
		<!-- 批量导入二级框 -->
		<el-dialog
			:title="$t('common.components.batch_import')"
			center
			:visible.sync="visibleUpload"
			width="450px"
			class="col-setting"
			:before-close="handleClose"
		>
			<div class="dao-template">
				<div class="dao-left">
					<span v-if="errMessage">
						<i
							style="color:red;font-size:18px;vertical-align: top;"
						>
							*
						</i>
						{{ $t('common.components.template') }}:
						<span
							style="color:red;font-size:12px;vertical-align: top;"
						>
							{{ $t('common.components.right_file') }}
						</span>
					</span>
					<span v-else>
						<i
							style="color:red;font-size:18px;vertical-align: top;"
						>
							*
						</i>
						{{ $t('common.components.template') }}:{{
							$t('common.components.select_file').replace(
								'xx',
								fileList.length || 0
							)
						}}
					</span>
					<span style="color:#e6a23ce8;margin:5px 0">
						{{ $t('common.components.comment') }}
					</span>
				</div>
				<div style="display: inline-block">
					<!-- this.curFile -->

					<el-upload
						v-if="fileList.length === 0 && !errMessage"
						ref="upload"
						size="mini"
						:auto-upload="false"
						:on-change="handleChange"
						:show-file-list="false"
						:file-list="fileList"
						action="#"
					>
						<el-button
							slot="trigger"
							icon="el-icon-circle-plus-outline"
							size="mini"
							type="primary"
						>
							{{ $t('common.components.upload') }}
						</el-button>
					</el-upload>
					<el-button
						v-else
						type="danger"
						icon="el-icon-delete"
						@click="deleteFlied"
					>
						{{ $t('common.delete') }}
					</el-button>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="resetUpload">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button
					:type="
						fileList.length > 0 && !errMessage ? 'success' : 'info'
					"
					:disabled="fileList.length === 0 || errMessage"
					@click="submitUpload"
				>
					{{ $t('common.import') }}
				</el-button>
			</div>
		</el-dialog>
		<!-- 导入成功二级框提示-->
		<el-dialog
			:title="$t('common.components.tip')"
			center
			:visible.sync="visible"
			width="450px"
			class="col-setting ti-si"
			:before-close="handleClose"
		>
			<div style="text-align: center;">
				<span><svg-icon icon-class="dui" class="dui-icon" /></span>
				<span
					style="
                    margin:0 12px;
                    font-size:17px;
                    font-weight: 900;
                     "
					@click="copy(failCount)"
				>
					{{ $t('common.components.complete') }}，{{
						$t('common.components.all')
					}}{{
						`${domainDataList.plan}${$t(
							'common.components.count'
						)}，${$t('common.success')}${
							domainDataList.success
						}${$t('common.components.count')}，
						${$t('common.components.fail')}`
					}}
					<span>
						{{ +domainDataList.plan - +domainDataList.success }}
					</span>
					{{ $t('common.components.count') }}
					<i class="el-icon-document-copy" />
				</span>
			</div>
		</el-dialog>
		<!-- 导入成功二级框提示-->
		<el-dialog
			:title="$t('common.components.tip')"
			center
			:visible.sync="visible1"
			width="550px"
			class="col-setting ti-si"
			:before-close="handleClose"
		>
			<div style="text-align: center;">
				<span><svg-icon icon-class="dui" class="dui-icon" /></span>
				<span
					style="
                    margin:0 12px;
                    font-size:17px;
                    font-weight: 900;
                    cursor: pointer;
                     "
					@click="copy"
				>
					{{ $t('common.components.complete') }}，{{
						$t('common.components.all')
					}}{{
						`${domainDataList.plan}${$t(
							'common.components.count'
						)}，${$t('common.success')}${
							domainDataList.success === undefined
								? domainDataList.successList &&
								  domainDataList.successList.length
								: domainDataList.success
						}${$t('common.components.count')}，
						${$t('common.components.fail')}`
					}}
					<span>
						{{
							domainDataList.failList &&
								domainDataList.failList.length
						}}
					</span>
					{{ $t('common.components.count') }}
					<i class="el-icon-document-copy" />
				</span>
			</div>
		</el-dialog>
	</div>
</template>

<script>
export default {
	props: {
		visibleUpload: {
			type: [String, Boolean],
			default: () => {
				return true
			}
		},
		noShowBtn: {
			type: [String, Boolean],
			default: () => {
				return false
			}
		},
		activeStatus: {
			type: [String, Boolean],
			default: () => {
				return false
			}
		},
		fileSize: {
			type: [String, Number],
			default: () => {
				return 500
			}
		},
		rowData: {
			type: Object,
			default: () => {
				return {}
			}
		},
		fileAPI: {
			type: [String],
			default: () => ''
		},
		params: {
			type: String,
			default: () => {}
		}
	},
	data() {
		return {
			curFile: '',
			failCount: undefined,
			successCount: undefined,
			fileList: [],
			failList: [],
			domainDataList: [],
			errMessage: false,
			visible: false,
			visible1: false,
			fileList1: ''
		}
	},
	created() {},
	methods: {
		copy(e) {
			const arr1 = []
			this.domainDataList.failList.forEach((item) => {
				arr1.push(item.username)
			})
			const val = arr1.join(',')
			if (val) {
				this.$copyText(val).then(() => {
					this.$message({
						type: 'success',
						message: this.$t('common.copy')
					})
				})
			}
		},
		deleteFlied() {
			this.curFile = ''
			this.$emit('fileUrl', this.curFile)
			this.fileList = []
			this.errMessage = false
		},
		handleClose() {
			this.curFile = ''
			this.fileList = []
			this.errMessage = false
			this.visible = false
			this.visible1 = false
			// this.$emit('update:visibleUpload', false)
		},
		submitUpload() {
			this.visible1 = true
		},
		submitUpload1() {
			this.$emit('update:visibleUpload', false)
			this.$message.warning(this.$t('common.components.wait'))
			this.$api
				.importDomainExcel(this.domainDataList)
				.then((res) => {
					if (res.code === 200) {
						const { failCount, successCount } = res.data || {}
						this.failCount = failCount
						this.successCount = successCount
						// this.$emit('load-data')
						this.visible = true
					}
				})
				.catch(() => {})
			// 导入成功的提醒
		},
		handleChange(file) {
			this.curFile = file.raw
			this.uploadFile(file)
		},
		checkFileType(type) {
			const arr = ['xls', 'xlsx']
			const str = type?.split('.')
			return arr.includes(str[1])
		},
		checkFileSize({ type, size }) {
			return size / 1024 / 1024 < this.fileSize
		},
		beforeAvatarUpload(file, successCB) {
			const isRight = this.checkFileType(file.name)
			const isLtSize = this.checkFileSize(file)
			if (!isRight || !isLtSize) {
				this.errMessage = true
				// return this.$message.error('文件不是xlsx文档 或 大小超过5M!')
			} else {
				successCB()
			}
		},
		uploadFile(file) {
			this.beforeAvatarUpload(this.curFile, () => {
				this.isUploading = true
				const formData = new FormData()
				formData.append('file', this.curFile)
				if (this.params) {
					formData.append('merchantId', this.params)
				}
				this.$api[this.fileAPI](formData)
					.then((res) => {
						if (res.code === 200) {
							this.fileList.push(file)
							this.curFile = ''
							this.domainDataList = res.data
							this.errMessage = false
							this.$message({
								message: this.$t(
									'common.components.upload_success'
								),
								type: 'success'
							})
							if (
								this.activeStatus &&
								res.data.successList.length
							) {
								this.fileList1 = res.data
								this.$emit(
									'fileUrl',
									res.data.successList || []
								)
							}
							if (this.noShowBtn) {
								this.$emit('fileUrl', file.raw)
								this.failList = res.data
								// this.visible1 = true
							}
						} else {
							this.curFile = ''
							this.fileList = []
							this.fileList1 = ''
						}
					})
					.catch(() => {
						this.curFile = ''
						this.fileList = []
						this.fileList1 = ''
					})
			})
		},
		importExcel() {
			if (!this.fileList.length || !this.domainDataList.length) return
			this.viewType = 2
			this.progressType = 1
			this.progressInfo = this.$t('common.components.wait')
			this.$api.importDomainExcel(this.domainDataList).then((res) => {
				this.progressType = 2
				const { failCount, successCount } = res.data || {}
				this.progressInfo = `${this.$t(
					'common.components.complete'
				)}，${this.$t('common.components.all')}${
					this.domainDataList.length
				}${this.$t('common.components.count')}，${this.$t(
					'common.success'
				)}${successCount}${this.$t(
					'common.components.count'
				)}，${this.$t('common.components.fail')}${failCount}${this.$t(
					'common.components.count'
				)}`
				this.$emit('load-data')
			})
		},
		handleAvatarDefeat() {
			this.curFile = ''
			this.isUploading = false
		},
		handleAvatarSuccess(url) {
			this.isUploading = false
			this.curFile.imgUrl = url
			// this.fileUrl = url
			// this.$emit('fileUrl', url)
		},
		resetUpload() {
			this.deleteFlied()
			this.$emit('update:visibleUpload', false)
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__headerbtn {
	position: absolute;
	top: 8px;
	right: 20px;
	padding: 0;
	background: 0 0;
	border: none;
	outline: 0;
	cursor: pointer;
	font-size: 30px;
}

.dui-icon {
	width: 50px;
	height: 50px;
}
.dao-template {
	display: flex;
	margin-top: 10%;
	justify-content: space-around;
	.dao-left {
		display: flex;
		flex-direction: column;
		span {
			font-size: 12px;
		}
	}
}
::v-deep .el-dialog__title {
	position: absolute;
	left: 12px;
	top: 12px;
}
::v-deep .el-dialog__header {
	padding: 44px 20px 10px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.219);
}

::v-deep .dialog-footer {
	position: absolute;
	top: 15px;
	right: 12px;
}
</style>
